<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Map</title>
  <script
          type="text/javascript"
          src="http://api.tianditu.gov.cn/api?v=4.0&tk=c2325194078734ce4f8914e44b3bec46"
  ></script>
  <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script src="{{ url_for('static',filename='vue/vue2.6.js') }}"></script>
  <script src="{{ url_for('static',filename='elementUi/elementUi.js') }}"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
  <link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/bootstrap@4.6_min.css') }}"/>
  <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
</head>
<body onLoad="onLoad()" style="overflow-x: hidden;overflow-y: hidden;">
<div class="container" id="app">
  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="height: 3.2rem ;padding: 0 1.2rem;">
    <a class="navbar-brand" href="#" style="font-size: 1.2rem">
      <img src="{{ url_for('static',filename='icons/tanx.png') }}" alt="" width="35" height="35"
           class="d-inline-block align-text-top">
      宅基地违占识别系统
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">刷新</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="row" style="margin-top: 1rem;padding: 1rem">
    <div class="col-8 card border-light shadow p-3 mb-5 bg-white rounded" style="height: 45rem;">
      <div class="rounded" id="mapDiv" @click="rectClick"
           style="height: 100%;width: 100%;margin-top: 0.5rem;margin-bottom: 0.5rem"></div>
    </div>
    <div class="col-4 container-fluid ">
      <div class="row" style="margin-left: 0.5rem">
        <transition name="el-zoom-in-top">
          <div class="col-7 card border-light shadow p-3 mb-3 bg-white rounded" v-show="step1" style="height: 12rem;">
            <div class="card-title text-center text-primary" style="font-size: 1rem">上传标准数据</div>
            <div class="putfile" style="margin-top: 0.5rem">
              <el-upload
                      class="upload-demo"
                      ref="dataFormFile"
                      accept=".json"
                      :multiple="false"
                      :limit="1"
                      :action="upload_file_url"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :on-success="putsucess"
                      :on-error="puterr"
                      :file-list="fileList"
                      :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary" @click="init()">选取文件</el-button>

                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一个json文件，且不超过500kb</div>
              </el-upload>
              {{ fileList }}
            </div>
          </div>
        </transition>
        <div class="col-5">
          <div class="card border-light shadow  bg-white rounded" v-show="step1"
               style="padding-left: 0.3rem;height: 7rem">
            <div class="card-title text-center text-primary" style="font-size: 1rem;margin-top: 0.5rem">算法选择</div>
            <el-select v-model="algorithm" placeholder="请选择">
              <el-option
                      v-for="item in algorithms"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <transition name="el-zoom-in-top">
            <div class="card border-light shadow p-3 mb-3 bg-white rounded text-center " v-show="step2"
                 style="padding-left: 0.3rem;height: 4rem;margin-top: 1rem">
              <div class="CutScreenSwitch" style="margin-top: 0.3rem">
                <el-switch
                        v-model="switchvalue"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
                <el-popover
                        placement="right"
                        width="200"
                        trigger="hover"
                        content="打开截图开关后，鼠标左键点击地图对应位置即可截图">
                  <img src="{{ url_for('static',filename='icons/help.png') }}" alt="" slot="reference"
                       style="width: 1rem;height: 1rem"/>
                </el-popover>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="row" style="margin-left: 0.5rem">
        <transition name="el-zoom-in-top">
          <el-container v-loading="loading" style="width: 100%">
            <div class="col card border-light shadow p-3 mb-3 bg-white rounded" v-show="step2" style="height: 12rem;">
              <div class="card-title text-center text-primary" style="font-size: 1rem">截图展示</div>
              <div class="row" v-if="jtdialogVisible">
                <div class="col-6">
                  <el-image
                          style="width: 8rem; height: 8rem"
                          :src="preurl"
                          :preview-src-list="[preurl]"
                          class="rounded"
                  >
                  </el-image>
                </div>
                <div class="col-6" style="margin-top: 1rem;">
                  <button type="button" class="btn btn-primary btn-block mb-4" @click="cloimg()">确 定</button>
                  <button type="button" class="btn btn-light btn-block"
                          @click="jtdialogVisible = false;step3=false;step4=false">取 消
                  </button>
                </div>
              </div>
            </div>
          </el-container>
        </transition>
      </div>
      <div class="row" style="margin-left: 0.5rem">
        <transition name="el-zoom-in-top">
          <div class="col card border-light shadow p-3 mb-3 bg-white rounded" v-show="step3" style="height: 12rem;">
            <div class="card-title text-center text-primary" style="font-size: 1rem">预测结果</div>
            <div class="row" v-if="selectedIndex!=-1">
              <div class="col-6">
                <el-image
                        style="width: 8rem; height: 8rem"
                        :src="'data:image/gif;base64,'+imgsrc2[selectedIndex]"
                        :preview-src-list="['data:image/gif;base64,'+imgsrc2[selectedIndex]]"
                        class="rounded"
                >
                </el-image>
              </div>
              <div class="col-6">
                <button type="button" class="btn btn-primary btn-block" @click="getxsd()">提 交</button>
                <button type="button" class="btn btn-primary btn-block" @click="selectTwice()">重新选择</button>
                <button type="button" class="btn btn-light btn-block" @click="selectedIndex=-1;step4=false">取 消</button>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div class="row" style="margin-left: 0.5rem">
        <transition name="el-zoom-in-top">
          <div class="col card border-light shadow p-3 mb-3 bg-white rounded" v-show="step4" style="height: 6rem;">
            <el-popover
                    placement="right"
                    width="200"
                    trigger="hover">
              <div class="xsd text-center text-info">精确数值</div>
              <div class="xsd text-center text-success" v-if="xsd<1">{[xsd]}</div>
              <div class="xsd text-center text-warning" v-if="xsd>1&&xsd<1.5">{[xsd]}</div>
              <div class="xsd text-center text-danger" v-if="xsd>1.5">{[xsd]}</div>
              <div class="card-title text-center text-primary" slot="reference" style="font-size: 1rem">相似度</div>
            </el-popover>
            <div class="xsd text-center text-success" v-if="xsd<1">违占可能性小</div>
            <div class="xsd text-center text-warning" v-if="xsd>1&&xsd<1.5">疑似违占</div>
            <div class="xsd text-center text-danger" v-if="xsd>1.5">违占可能性大</div>
          </div>
        </transition>
      </div>
    </div>
  </div>
  <el-dialog width="70%" title="选择一个结果" :visible.sync="dialogVisible" center style="overflow: hidden" top="8vh">
    <div class="container" style="overflow-y: auto; height: 35rem">
      <div class="tc-wrap row" v-if="imgsrc2">
        <div class="card col-sm-2 mb-2 border-light" style="width: 8rem;">
          <el-image :src="'data:image/gif;base64,'+yuantu" alt="" class="card-img-top rounded mt-1"
                    :preview-src-list="['data:image/gif;base64,'+yuantu]"></el-image>
          <button class="btn btn-outline-secondary mt-1 " data-toggle="button" disabled>原图预测结果</button>
        </div>
        <div v-for="(item,index) in imgsrc2" class="card col-sm-2 mb-2 border-light" style="width: 8rem;">
          <el-image :src="'data:image/gif;base64,'+item" alt="" class="card-img-top rounded mt-1"
                    :preview-src-list="['data:image/gif;base64,'+item]"></el-image>
          <button class="btn btn-outline-primary mt-1 " data-toggle="button" @click="selectingImg=index">选择这个轮廓</button>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectImgToXsd">确 定</el-button>
      </span>
  </el-dialog>
  <el-dialog width="50%" title="预测进度" :visible.sync="PerictLoading" center style="overflow: hidden" top="18vh">
    <el-steps :active="PredictStep" finish-status="success" style="margin-top: 2rem">
      <el-step title="上传图片中"></el-step>
      <el-step title="算法处理中"></el-step>
      <el-step title="正在标注中"></el-step>
      <el-step title="返回结果"></el-step>
    </el-steps>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="PerdictProcess" status="success"
                 style="margin-top: 3rem"></el-progress>
  </el-dialog>
</div>
</body>
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
</html>